<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="areas"
                v-model="filterFieldArea"
                :options="areasOptions"
                @change="getAreaIdSearch"
                clearable
                filterable
                placeholder="请选择"
                class="proInputWidth"
                :props="{ checkStrictly: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="发薪年月" class="row-padding-bottom">
                <el-date-picker
                  v-model="filterField.yearAndMonth"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择月"
                  :append-to-body="false"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="订单号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.sequenceCode"
                  placeholder="请输入订单号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <!-- <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="commonBtn"
                ></el-button> -->
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
            <el-form-item>
              <exportBtn
                :dataLen="salaryList.length"
                :filterField="filterField"
                api="api-s/report/export_JC_CS_DEL_SALARY"
              ></exportBtn>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="salaryList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column prop="projectName" label="项目名称"></el-table-column>  -->
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="所属区域"
            align="center"
            :formatter="formatTd"
            width="140px"
          ></el-table-column>
          <el-table-column
            prop="year,month,batchNo,createTime"
            label="工资表信息"
            width="230px"
          >
            <template slot-scope="scope">
              <p style="olor: rgb(96, 98, 102); font-weight: bold">
                {{ scope.row.year || '--' }}年{{
                  scope.row.month || '--'
                }}月第{{ scope.row.batchNo || '--' }}批次工资
              </p>
              <p style="color: #999; font-size: 12px" v-show="!isHsUser()">
                创建日期： {{ scope.row.createTime || '--' }}
              </p>
              <p style="color: #999; font-size: 12px">
                订单号： {{ scope.row.sequenceCode || '--' }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankActPay"
            label="应发/到账工资总额（元）"
            min-width="200"
          >
            <template slot-scope="scope">
              <p>
                ￥{{ scope.row.shouldPay || '0' }} / ￥{{
                  scope.row.bankActPay || '--'
                }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankActPayTotal"
            label="应发/到账总人数"
            :formatter="formatTd"
            min-width="200"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.shouldPayTotal || '0' }} /
                {{ scope.row.bankActPayTotal || '--' }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusDesc"
            label="工资表状态"
            :formatter="formatTd"
            min-width="180"
          >
            <template slot-scope="scope">
              <ul>
                <li>
                  <span>{{ scope.row.statusDesc }}</span>
                  <span
                    v-if="scope.row.sendTypeDesc"
                    class="generationMethod fontColorTheme fontBorderTheme"
                    >{{ scope.row.sendTypeDesc }}</span
                  >
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column
            prop="operateStatusDesc"
            label="处理状态"
            :formatter="formatTd"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="240">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toDetail(scope.$index, scope.row)"
                v-hasBtn="['salaryList:detail', 'bankSalaryList:detail']"
                >查看详情</el-link
              >
              <el-link
                type="primary"
                @click="backOff(scope.$index, scope.row)"
                v-if="isShowUpdate"
                >状态回退</el-link
              >
              <el-link
                type="primary"
                v-if="scope.row.operateStatus"
                @click="toLog(scope.$index, scope.row)"
                >日志</el-link
              >
              <!--  -->
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <statusFallback
      :dialogVisible="dialogVisible"
      v-if="isShowFallback"
      @closeDialogVisible="closeDialogVisible"
      :salaryId="salaryId"
      @searchTable="searchList"
    ></statusFallback>
    <el-drawer
      title="操作日志"
      :visible.sync="isShowDrawer"
      direction="rtl"
      size="810px"
      custom-class="brand-dialog-min-width"
    >
      <el-col :span="24">
        <el-table
          :data="gridData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="border: 1px solid #dfe6ec"
          :max-height="tableHeight"
          v-loading="logLoading"
        >
          <el-table-column
            property="operateTimeFormat"
            label="操作时间"
            width="180px"
            align="center"
          ></el-table-column>
          <el-table-column
            property="operator"
            label="操作人"
            width="180px"
            align="center"
          ></el-table-column>
          <el-table-column label="操作原因" width="230px" align="left">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.operateReason"
                :columnName="'operateReason'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            property="operateTimeFormat"
            label="操作凭证"
            width="100"
            align="left"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="showVoucher(scope.row)"
                >凭证</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <Pagination
            ref="drawerPagination"
            @getList="getDrawerTableList"
            :requestUrl="drawerRequestUrl"
            :filterField="filterDrawer"
          ></Pagination>
        </div>
      </el-col>
    </el-drawer>
    <!-- 查看凭证 -->
    <el-dialog
      title="查看凭证"
      width="900px"
      :visible.sync="uploadVoucher"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div
        class="uploadBox"
        v-show="uploadImg.length < 1"
        style="text-align: center"
      >
        暂无凭证
      </div>
      <div>
        <ul class="clearfix imgStyle">
          <li class="fl" v-for="(item, index) of uploadImg" :key="index">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.url ? item.url : item.absolutePath"
              :preview-src-list="voucherSrcList"
              @click="enlargeImg(index)"
            ></el-image>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import emptyTable from '@/components/publicCom/emptyTable'
import Pagination from '@/components/publicCom/pagination'
import topTitle from '@/components/publicCom/topTitle'
import statusFallback from '@/components/delSalary/statusFallback'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'salaryList',
  mixins: [scrollTable],
  components: {
    emptyTable,
    Pagination,
    topTitle,
    statusFallback,
  },
  data() {
    return {
      requestUrl: 'api-su/cs/salary/expand/listforadmin',
      //表格数据
      salaryList: [],
      titleText: '删除工资表',
      isShow: false,
      loading: true,
      filterField: {
        yearAndMonth: '',
        projectName: '',
        areaId: '',
        sequenceCode: '', //订单号
        serverArea: '', // 服务部署区域
      },
      pageSize: 20,
      pageNo: 1,
      dialogVisible: false,
      isShowFallback: false,
      isShowDrawer: false,
      logLoading: true, //考勤loading
      tableHeight: window.innerHeight - 200,
      gridData: [],
      drawerRequestUrl: 'api-su/cs/salarylog/expand/loglist',
      uploadVoucher: false, //查看凭证
      uploadImg: [],
      voucherSrcList: [],
      voucherOldSrcList: [],
      salaryId: '',
      filterDrawer: {
        salaryId: '',
        areaId: '',
      },
      filterFieldArea: [],
      isShowUpdate: '',
      advanced: false,
    }
  },
  computed: {
    ...mapState(['areasOptions']),
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('salaryList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('bankSalaryList:update') > -1
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //获取搜索选中的区域最后一级id
    getAreaIdSearch() {
      this.filterField.areaId =
        this.filterFieldArea[this.filterFieldArea.length - 1]
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.salaryList = data
      this.loading = false
      if (this.salaryList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    },
    //跳转详情
    toDetail(index, row) {
      var queryData = {
        projectId: row.projectId,
        projectName: row.projectName,
        salaryId: row.id,
        yearQuery: row.year,
        statusQuery: row.status,
        // from: this.message,
        batchNoInfo:
          row.year + '年' + row.month + '月第' + row.batchNo + '批次工资',
        delSalary: 'delSalaryList',
        monthQuery: row.month,
        batchNo: row.batchNo,
      }
      this.$router.push({
        path: '/home/salaryDf/salaryPayBatchDetailList',
        name: 'salaryPayBatchDetailList',
        query: queryData,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/delSalary/salaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 状态回退
    backOff(index, row) {
      this.salaryId = row.id
      this.isShowFallback = true
      this.dialogVisible = true
    },
    // 关闭状态回退弹框
    closeDialogVisible(data) {
      this.isShowFallback = false
      this.dialogVisible = false
    },
    enlargeImg(index) {
      this.voucherSrcList = this.voucherOldSrcList
      var demo = this.voucherSrcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.voucherSrcList = list
    },
    // 显示日志
    toLog(index, row) {
      this.filterDrawer.salaryId = row.id
      this.isShowDrawer = true
      this.$nextTick(function () {
        this.$refs.drawerPagination.getTableListData()
      })
    },
    getDrawerTableList(data) {
      this.logLoading = false
      this.gridData = data
    },
    // 显示凭证弹框
    showVoucher(row) {
      this.uploadVoucher = true
      this.getUploadImg(row.id)
    },
    //获取凭证数据
    getUploadImg(id) {
      var data = {
        salaryLogId: id,
      }
      this.axios({
        method: 'post',
        url: 'api-su/cs/salarylog/expand/filedetail',
        data: data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.uploadImg = response.data.result
            this.voucherSrcList = []
            this.voucherOldSrcList = []
            for (var i = 0; i < this.uploadImg.length; i++) {
              this.voucherSrcList.push(this.uploadImg[i].absolutePath)
              this.voucherOldSrcList.push(this.uploadImg[i].absolutePath)
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style lang="less" scoped>
.generationMethod {
  display: inline-block;
  width: 54px;
  line-height: 16px;
  border: 1px solid #009588;
  font-size: 12px;
  color: #009588;
  margin-left: 4px;
  text-align: center;
}
.mainCon {
  top: 197px;
}
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
    line-height: 10px;
  }
  .upLoadDom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    input {
      width: 100px;
      height: 36px;
    }
  }
}
.imgStyle {
  // margin-left: 135px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}
.commomPadding {
  padding-top: 0;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}

@import '../../../static/css/filterArea.less';
</style>
